<template>
    <div class="index-container">
        <!-- 导航栏 -->
        <indexNavTeam
            @click-left="$router.go(-1)"
            @confirm="handleTeamCfm"
            :teamOption="teamOption"
        ></indexNavTeam>

        <!-- 报表tab标签 -->
        <div class="report-tabs">
            <template v-for="(tabs, index) in tabsList">
                <div class="report-tabs-list" :class="{'report-tabs-active': active == tabs.value}" :key="index" @click="handleTabs(tabs.value)">{{ tabs.name }}</div>
                <p v-if="index == 0" :key="'p'+index" class="flex-grow-1"></p>
            </template>
        </div>

        <!-- 报表内容 -->
        <div class="report-card">
            <!-- 日报时间 -->
            <div class="report-card-time" v-if="active == 'date'" @click="daily.show = true">
                <p>{{ daily.title | dayFormat }}</p>
                <img src="../../assets/current/sort-down.png" alt="">
            </div>
            <!-- 周报时间 -->
            <div class="report-card-time" v-if="active == 'week'" @click="week.show = true">
                <p>{{ week.defaultDate | weekFormat }}</p>
                <img src="../../assets/current/sort-down.png" alt="">
            </div>
            <!-- 月报时间 -->
            <div class="report-card-time" v-if="active == 'month'" @click="month.show = true">
                <p>{{ month.title | monthFormat }}</p>
                <img src="../../assets/current/sort-down.png" alt="">
            </div>
            <p class="report-card-num">{{reportInfo.ttlCarNum || 0}}</p>
            <p class="report-card-prop">车辆总数(辆)</p>
            <div class="report-card-content">
                <div class="report-card-list">
                    <p>车辆总数(辆)</p>
                    <p class="report-card-val">{{reportInfo.ttlCarNum || 0}}</p>
                </div>
                <div class="report-card-list">
                    <p>总里程(KM)</p>
                    <p class="report-card-val">{{reportInfo.totalMile || 0}}</p>
                </div>
                <div class="report-card-list">
                    <p>运行总时长(h)</p>
                    <p class="report-card-val">{{ parseFloat((reportInfo.totalRunTime / 60).toFixed(2)) || 0}}</p>
                </div>
                <div class="report-card-list">
                    <p>换电次数(次)</p>
                    <p class="report-card-val">{{reportInfo.exChangeCount || 0}}</p>
                </div>
                <div class="report-card-list">
                    <p>换电电量(kWh)</p>
                    <p class="report-card-val">{{ parseFloat(reportInfo.exChangeChargeEnergy).toFixed(2) || 0}}</p>
                </div>
                <div class="report-card-list">
                    <p>插枪充电次数(次)</p>
                    <p class="report-card-val">{{reportInfo.gunChargecount || 0}}</p>
                </div>
                <div class="report-card-list">
                    <p>插枪充电电量(kWh)</p>
                    <p class="report-card-val">{{reportInfo.gunChargeEnergy || 0}}</p>
                </div>
                <div class="report-card-list">
                    <p>运输单数</p>
                    <p class="report-card-val">{{reportInfo.transRouteOrderCount || 0}}</p>
                </div>
                <div class="report-card-list">
                    <p>订单完成数</p>
                    <p class="report-card-val">{{reportInfo.transRouteOrderSuccessCount || 0}}</p>
                </div>
                <div class="report-card-list">
                    <p>运输总载重(吨)</p>
                    <p class="report-card-val">{{reportInfo.loadWeight || 0}}</p>
                </div>
                <div class="report-card-list" @click="toFaultDistribution">
                    <p>故障车次</p>
                    <p class="report-card-fault">{{reportInfo.errorCount || 0}}</p>
                </div>
            </div>
        </div>

        <!-- 日历 —— 日报 -->
        <van-calendar
            v-model="daily.show"
            :default-date="daily.defaultDate"
            :title="daily.title | dayFormat"
            :show-confirm="false"
            :show-mark="false"
            :show-subtitle="false"
            :row-height="34"
            :min-date="new Date('2021/01/01')"
            :max-date="daily.maxDate"
            :style="{ height: '450px' }"
            @select="handleDate"
        >
            <div class="report-calendar-footer" slot="footer">
                <button class="report-calendar-close" @click="daily.show = false">取消</button>
                <button class="report-calendar-confirm" @click="handleConfirm">确定</button>
            </div>
        </van-calendar>

        <!-- 日历 —— 周报 -->
        <van-calendar
            type="multiple"
            v-model="week.show"
            :default-date="week.defaultDate"
            :title="week.defaultDate | weekFormat"
            :show-confirm="false"
            :show-mark="false"
            :show-subtitle="false"
            :row-height="34"
            :min-date="new Date('2021/01/01')"
            :max-date="week.maxDate"
            :first-day-of-week="1"
            :style="{ height: '450px' }"
            @select="handleWeek"
            @unselect="handleWeekUn"
        >
            <div class="report-calendar-footer" slot="footer">
                <button class="report-calendar-close" @click="week.show = false">取消</button>
                <button class="report-calendar-confirm" @click="handleWeekCfm">确定</button>
            </div>
        </van-calendar>

        <!-- 日历 —— 月报 -->
        <monthCalendar
            :show="month.show"
            :default-date="month.defaultDate"
            :max-date="month.maxDate"
            @select="handleMonth"
            @close="month.show = false"
        >
            <div class="report-calendar-footer">
                <button class="report-calendar-close" @click="month.show = false">取消</button>
                <button class="report-calendar-confirm" @click="handleMonthCfm">确定</button>
            </div>
        </monthCalendar>
    </div>
</template>

<script>
import moment from 'moment'
import pageConfig from './page-config'
import indexNavTeam from '../../components/index-nav-team/index-nav-team.vue'
import monthCalendar from './components/month-calendar.vue'

export default {
    components: {
        indexNavTeam,
        monthCalendar
    },
    data () {
        return {
            title: pageConfig.title,
            active: 'date',
            tabsObj: {
                date: [
                    { name: '日报', value: 'date' },
                    { name: '周报', value: 'week' },
                    { name: '月报', value: 'month' }
                ],
                week: [
                    { name: '周报', value: 'week' },
                    { name: '月报', value: 'month' },
                    { name: '日报', value: 'date' }
                ],
                month: [
                    { name: '月报', value: 'month' },
                    { name: '日报', value: 'date' },
                    { name: '周报', value: 'week' }
                ]
            },
            tabsList: [
                { name: '日报', value: 'date' },
                { name: '周报', value: 'week' },
                { name: '月报', value: 'month' }
            ],
            daily: {
                show: false,
                maxDate: moment().subtract(1, 'days').toDate(),
                title: moment().subtract(1, 'days').format('YYYY-MM-DD'),
                defaultDate: moment().subtract(1, 'days').toDate()
            },
            week: {
                show: false,
                maxDate: moment(new Date()).weekday(7).toDate(),
                title: [],
                defaultDate: []
            },
            month: {
                show: false,
                maxDate: moment(new Date()).toDate(),
                title: moment().subtract(1, 'month').format('YYYY-MM'),
                defaultDate: moment().subtract(1, 'month').toDate()
            },
            queryParameter: {
                corpNo: this.$C.corpNo,
                teamNo: ''
                // teamNo: this.$store.state.selTeam.teamNo
            },
            reportInfo: [],
            teamOption: [{ no: '', text: '全部车队' }]
        }
    },
    mounted () {
        setTimeout(async () => {
            this.getLastWeek(new Date())
            // await this.getTeamOption()
            this.getReportInfo('date')
        }, 50)
        this.showItem()
    },
    methods: {
        /* 获取日报信息*/
        async getReportInfo (type) {
            let _ = this
            if (type == 'date') {
                _.queryParameter.reportDateStart = moment(_.daily.defaultDate).format('YYYY-MM-DD')
                _.queryParameter.reportDateEnd = moment(_.daily.defaultDate).format('YYYY-MM-DD')
            } else if (type == 'week') {
                _.queryParameter.reportDateStart = moment(_.week.defaultDate[0]).format('YYYY-MM-DD')
                _.queryParameter.reportDateEnd = moment(_.week.defaultDate[6]).format('YYYY-MM-DD')
            } else if (type == 'month') {
                _.queryParameter.reportDateStart = moment(this.month.defaultDate).startOf('month').format('YYYY-MM-DD')
                _.queryParameter.reportDateEnd = moment(this.month.defaultDate).endOf('month').format('YYYY-MM-DD')
            }
            console.log(_.queryParameter)
            try {
                this.$U.showLoading(_)
                _.queryParameter.teamNo = this.$store.state.selTeam.teamNo
                const res = await this.$H.post(_, this.$A.reportIndex.apprpt, _.queryParameter)
                this.reportInfo = res.data
                this.$U.hideLoading(_)
            } catch (e) {
                this.$U.hideLoading(_)
            }
        },

        /** 车队下拉*/
        async getTeamOption () {
            let _ = this
            try {
                const res = await _.$H.get(_, _.$A.team.findAppTeamList, {})
                if (res.status == 200) {
                    for (let v of res.data) {
                        let obj = {
                            no: v.teamNo,
                            text: v.teamName
                        }
                        _.teamOption.push(obj)
                    }
                }
                if (_.$store.state.selTeam == '') {
                    this.$store.commit('setSelTeam', { teamName: _.teamOption[0].text, teamNo: _.teamOption[0].no })
                }
            } catch (e) {
                _.$toast.fail(e.msg)
            }
        },

        /* 日报 —— 选中日期 */
        handleDate (val) {
            this.daily.defaultDate = val
        },

        /* 日报 —— 确认按钮 */
        handleConfirm () {
            this.daily.title = moment(this.daily.defaultDate).format('YYYY-MM-DD')
            this.getReportInfo('date')
            this.daily.show = false
        },

        /* 周报 —— 选中日期 */
        handleWeek (val) {
            let newDate = val.pop()
            this.getFullWeek(newDate)
        },

        /* 周报 —— 取消选中日期 */
        handleWeekUn (val) {
            this.getFullWeek(val)
        },

        /* 周报 —— 确认按钮 */
        handleWeekCfm () {
            this.week.title = [
                moment(this.week.defaultDate[0]).format('YYYY-MM-DD'),
                moment(this.week.defaultDate[1]).format('YYYY-MM-DD'),
                moment(this.week.defaultDate[2]).format('YYYY-MM-DD'),
                moment(this.week.defaultDate[3]).format('YYYY-MM-DD'),
                moment(this.week.defaultDate[4]).format('YYYY-MM-DD'),
                moment(this.week.defaultDate[5]).format('YYYY-MM-DD'),
                moment(this.week.defaultDate[6]).format('YYYY-MM-DD')
            ]
            this.getReportInfo('week')
            this.week.show = false
        },

        /* 月报 —— 选中日期 */
        handleMonth (val) {
            this.month.defaultDate = val
            console.log('handleMonth', val)
        },

        /* 月报 —— 确认按钮 */
        handleMonthCfm () {
            this.month.title = moment(this.month.defaultDate).format('YYYY-MM')
            this.getReportInfo('month')
            this.month.show = false
        },

        /* 根据某个日期，获取周的所有日期 */
        getLastWeek (val) {
            this.week.defaultDate = [
                moment(val).subtract(1, 'week').isoWeekday(1).toDate(),
                moment(val).subtract(1, 'week').isoWeekday(2).toDate(),
                moment(val).subtract(1, 'week').isoWeekday(3).toDate(),
                moment(val).subtract(1, 'week').isoWeekday(4).toDate(),
                moment(val).subtract(1, 'week').isoWeekday(5).toDate(),
                moment(val).subtract(1, 'week').isoWeekday(6).toDate(),
                moment(val).subtract(1, 'week').isoWeekday(7).toDate()
            ]
        },
        getFullWeek (val) {
            this.week.defaultDate = [
                moment(val).isoWeekday(1).toDate(),
                moment(val).isoWeekday(2).toDate(),
                moment(val).isoWeekday(3).toDate(),
                moment(val).isoWeekday(4).toDate(),
                moment(val).isoWeekday(5).toDate(),
                moment(val).isoWeekday(6).toDate(),
                moment(val).isoWeekday(7).toDate()
            ]
        },

        /* 切换tab标签页 */
        handleTabs (index) {
            this.getReportInfo(index)
            this.tabsList = this.tabsObj[index]
            // this.$store.commit('setReportDateType', index)
            this.active = index
        },

        /* 选中车队 */
        handleTeamCfm (val) {
            console.log(this.active)
            this.queryParameter.teamNo = val.teamNo
            this.getReportInfo(this.active)
        },

        /* 跳转故障分布 */
        toFaultDistribution () {
            if (this.reportInfo.errorCount != 0) {
                let queryParameter = this.queryParameter
                this.$router.push({ name: 'faultDistribution', query: { queryParameter }})
            } else {
                this.$toast('暂无故障 !')
            }
        }
    },
    filters: {
        dayFormat (val) {
            return moment(val).format('YYYY年MM月DD日')
        },
        weekFormat (val) {
            return moment(val[0]).format('YYYY年MM月DD日') + ' ~ ' + moment(val[6]).format('YYYY年MM月DD日')
        },
        monthFormat (val) {
            return moment(val).format('YYYY年MM月')
        }
    }
}
</script>

<style lang="less" scoped>
    @import './daily-index.less';
</style>
